<script setup lang="ts">
import { ref, computed } from 'vue'
import { showToast } from 'vant'

defineProps({
  title: {
    type: String,
    default: '标题'
  }
})

const show = ref(false)
const onClickLeft = () => {
  console.log('onClickLeft')
}
// history.back()
const onClickRight = () => showToast('按钮')

const list = ref([])
const loading = ref(false)
const finished = ref(false)
const showAll = ref(false) // 控制是否显示全部数据

// 计算属性：根据 showAll 的值决定显示的数据
const displayList = computed(() => {
  if (showAll.value) {
    return list.value
  } else {
    return list.value.slice(0, 3)
  }
})

const onLoad = () => {
  // setTimeout(() => {
  //   for (let i = 0; i < 10; i++) {
  //     list.value.push(list.value.length + 1)
  //   }
  //   loading.value = false
  //   if (list.value.length >= 40) {
  //     finished.value = true
  //   }
  // }, 1000)
}

// 切换显示全部/部分数据
const toggleShowAll = () => {
  showAll.value = !showAll.value
}
</script>

<template>
  <van-nav-bar
    fixed
    :title="title"
    right-text="注册"
    left-arrow
    @click-left="onClickLeft"
    @click-right="onClickRight"
  />

  <van-cell-group inset>
    <van-cell :border="false" title="我在这" value="内容" is-link />
    <van-divider />
    <van-cell title="标题2" value="内容" label="描述信息" />
    <van-cell title="单元格" is-link value="内容" />
    <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
  </van-cell-group>

  <van-cell is-link title="基础用法" @click="show = true" />
  <van-action-sheet v-model:show="show">
    <template #header>
      <div class="custom-header">
        <span class="title">33333</span>
        <span class="close-btn" @click="show = false">关闭</span>
      </div>
    </template>
    <div class="content">内容</div>
    <template #close>
      <div class="custom-close" @click="show = false">关闭</div>
    </template>
  </van-action-sheet>

  <div><br /></div>

  <van-cell-group inset :border="true" class="border">
    <van-cell-group>
      <van-cell
        :border="false"
        title="单元格"
        value="马壮"
        is-link
        value-class="pg-orange"
      />
    </van-cell-group>
    <van-cell title="单元格" value="内容" label="描述信息" />
    <van-cell title="单元格" is-link arrow-direction="down" value="内容" />
    <van-cell-group>
      <van-cell border title="单元格" value="内容" />
    </van-cell-group>
    <van-cell-group>
      <van-cell border title="单元格" value="内容" />
    </van-cell-group>
  </van-cell-group>
  <!-- finished-text="没有更多了" -->

  <!-- finished-text="没有更多了" -->
  <van-list v-model:loading="loading" :finished="finished" @load="onLoad">
    <!-- 使用计算属性 displayList 替代原始 list -->
    <van-cell
      class="list-cell"
      is-link
      v-for="item in displayList"
      :key="item"
      :title="'标题' + item"
      value="马壮"
      value-class="pg-orange"
    />

    <!-- 添加展开/收起按钮到 van-list 内部 -->
    <van-cell
      v-if="list.length > 3 && !showAll"
      title="展开更多"
      title-class="show-more"
      @click="toggleShowAll"
    />

    <van-cell
      v-if="list.length > 3 && showAll"
      title="收起"
      title-class="show-more"
      @click="toggleShowAll"
    />

    <!-- 空状态提示 -->
    <van-empty v-if="finished && list.length === 0" description="暂无数据" />
  </van-list>
</template>

<style lang="scss" scoped>
:deep() {
  --van-font-size-md: 15px;
  --van-cell-font-size: 15px;
  .van-action-sheet__close {
    --action-sheet-close-icon-color: red; // 可以改成你需要的颜色，如 #ff0000, blue 等
  }
  .van-nav-bar {
    &__arrow {
      color: var(--cp-text1);
      font-size: 18px;
    }
    &__text {
      // color: #000000;
      // font-size: 15px;
      color: var(--cp-text1);
    }
    &__title {
      font-size: 15px;
    }
  }
  .van-cell-group {
    &.van-cell-group--inset {
      border: 1px solid #000;
    }
  }
  .pg-orange {
    color: var(--cp-orange);
  }
  .show-more {
    text-align: center;
    // color: var(--cp-primary);
  }
  .van-cell.list-cell:after {
    left: 0;
    right: 0;
  }
}
.custom-close {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 16px;
  color: red; // 自定义颜色
  z-index: 1;
}

.custom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #f2f2f2;
}

.custom-header .title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.custom-header .close-btn {
  font-size: 14px;
  color: red; /* 自定义关闭按钮颜色 */
}
</style>
